<template>
    <u-sticky bg-color="#fff">
        <view class="search">
            <view class="left-box" @click="cityClick">
                <text>{{ cityModel.cityName }}</text>
                <u-icon name="arrow-down-fill" size="10"></u-icon>
            </view>
            <view class="right-box">
                <u-search :showAction="false" :clearabled="false" actionText="取消" :animation="false" placeholder="搜索电影院" v-model="value" @clear="searchChange" @change="searchChange"></u-search>
            </view>
        </view>
    </u-sticky>
</template>

<script>
export default {
    props: {
        keyword: {
            type: String,
            default: '',
        },
        cityModel: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            value: this.keyword,
        };
    },
    methods: {
        cityClick() {
            this.value = '';
            uni.navigateTo({ url: '/sub_pages/movie/citys/citys' });
        },
        searchChange() {
            this.$emit('update:keyword', this.value);
        },
    },
};
</script>

<style lang="scss" scoped>
.search {
    @include flexCenterCenter;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
    .left-box {
        @include flexCenterCenter;
        text {
            @include font(30rpx, #666);
            margin-right: 10rpx;
        }
    }
    .right-box {
        flex: 1;
        margin-left: 20rpx;
    }
}
</style>
